<template>
  <div id="HomePage">
    <!-- ****************************左侧************************* -->
    <div class="HomeLeft">
      <div class="YshopBut">
        <el-menu
          unique-opened
          default-active="00"
          class="el-menu-vertical-demo NavBigBox1"
          @open="handleOpen"
          @close="handleClose"
          :collapse="isCollapse"
          text-color="#fff"
        >
          <el-menu-item index="00" class="titleNav">
            <img src="../assets/logomenu.png" alt="" class="sidebar-logo" />
            <span v-if="!isCollapse" slot="title" class="logoTitle"
              >云飞ERP</span
            >
          </el-menu-item>
        </el-menu>
      </div>
      <div class="HomeLeft-List">
        <el-menu
          unique-opened
          :default-active="$route.path"
          class="el-menu-vertical-demo NavBigBox"
          @open="menuhandleOpen"
          @close="menuhandleClose"
          :collapse="isCollapse"
          text-color="#bfcbd9"
          router
        >
          <!-- <el-menu-item
            index="/view/index/index"
            class="HomePageBut"
            @click="indexShow"
          >
            <i class="iconfont icon-paint01"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <el-submenu
            :index="item.index"
            v-for="(item, index) of meauList"
            :key="index"
          >
            <template slot="title">
              <i :class="` iconfont icon-${item.meta.icon}`"></i>
              <span slot="title">{{ item.name }}</span>
            </template>
            <el-menu-item
              :index="'/view' + item.path + '/' + itemChilder.path"
              v-for="(itemChilder, indexChilder) of item.children"
              :key="indexChilder"
              @click="forward(index, indexChilder)"
            >
              <i :class="` iconfont icon-${itemChilder.meta.icon}`"></i>
              {{ itemChilder.meta.title }}</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!-- ****************************右侧************************* -->
    <div class="HomeRight">
      <!-- ****************************右侧头部************************* -->
      <div class="HomeRight-header">
        <div class="HomeRight-user">
          <div class="HomeRight-userLeft">
            <div class="HomeRight-userLeftRadio">
              <el-radio-group
                v-model="isCollapse"
                @input="GetValue"
                style="margin-bottom: 20px"
                class="userLeftRadioBox"
              >
                <el-radio-button v-show="isShow" :label="false">
                  <i class="iconfont icon-shouqi"></i>
                </el-radio-button>
                <el-radio-button v-show="!isShow" :label="true">
                  <i class="iconfont icon-shouqi-copy"></i>
                </el-radio-button>
              </el-radio-group>
            </div>
            <div class="HomeRight-userLeftBreadcrumb">
              <transition name="fade" mode="out-in">
                <el-breadcrumb separator="/" class="breadcrumbBox">
                  <div class="GoToHomePage" @click="ClickTogoPage()">
                    <span v-if="primaryMenu">首页</span>
                    <span v-if="!primaryMenu" class="noneStyle">首页</span>
                  </div>
                  <div v-show="primaryMenu" class="breadLine">/</div>
                  <div v-show="primaryMenu" class="breadShowText">
                    {{ primaryMenu }}
                  </div>
                  <div v-show="levelMenu" class="breadLine">/</div>
                  <div v-show="levelMenu" class="breadShowText">
                    {{ levelMenu }}
                  </div>
                </el-breadcrumb>
              </transition>
            </div>
          </div>
          <div class="HomeRight-userRight">
            <div class="HomeRight-userRightSearch">
              <i class="iconfont icon-search" @click="sarchShowInput"></i>
              <transition name="fade">
                <el-input placeholder="搜索" v-show="isShowInput"></el-input>
              </transition>
            </div>
            <div class="HomeRight-userRightYuanmadizhi">
              <el-tooltip
                class="item"
                effect="dark"
                content="源码地址"
                placement="bottom"
              >
                <i class="iconfont icon-yuanmadizhi" @click="linkClick"></i>
              </el-tooltip>
            </div>
            <div class="HomeRight-userRightQuanping">
              <el-tooltip
                class="item"
                effect="dark"
                content="全屏缩放"
                placement="bottom"
              >
                <i class="iconfont icon-quanping" @click="full"></i>
              </el-tooltip>
            </div>
            <div class="HomeRight-userRightBujushezhi">
              <el-tooltip
                class="item"
                effect="dark"
                content="布局设置"
                placement="bottom"
              >
                <i class="iconfont icon-bujushezhi"></i>
              </el-tooltip>
            </div>
            <div class="HomeRight-userRightIamge">
              <img src="../assets/logomenu.png" alt="头像" />
            </div>
            <div class="HomeRight-userRightDropdown">
              <el-dropdown @command="handleCommand">
                <i class="zhankai1 iconfont icon-zhankai1"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="布局设置"
                    >布局设置</el-dropdown-item
                  >
                  <el-dropdown-item command="个人中心"
                    >个人中心</el-dropdown-item
                  >
                  <el-dropdown-item command="退出登录"
                    >退出登录</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </div>
        <div class="HomeRight-userMemu">
          <el-tag
            v-for="tag in headerDynamicTags"
            :key="tag"
            :closable="tag != '首页'"
            :disable-transitions="false"
            @close="taghandleClose(tag)"
            @click="SelectTag(tag)"
            :class="tag == IsColor ? 'green' : ''"
          >
            · {{ tag }}
          </el-tag>
        </div>
      </div>
      <!-- *************************中间切换页*************************** -->
      <div class="HomeRight-Main">
        <transition name="fade" mode="out-in">
          <router-view @chage="chage"></router-view>
        </transition>
      </div>
      <!-- ************************底部********************** -->
      <div class="rightBottom">
        <span class="BottomTxt"
          >© 2018-2022 YSHOP All Rights Reserved ⋅ 豫ICP备17049587-2号</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import {
  setStore,
  getStore,
  GetCookie,
  RemoveCookie,
  removeStore,
  SetCookie,
} from "@/api/storage.js";
import screenfull from "screenfull";
export default {
  name: "HomePage",

  data() {
    return {
      isShowInput: false, //是否显示输入框
      isFull: false, //是否全屏
      // 菜单数据
      contextMenuData: {
        menuName: "demo",
        //菜单显示的位置
        axis: {
          x: null,
          y: null,
        },
        //菜单选项
        menulists: [
          {
            fnHandler: "home", //绑定事件
            icoName: "fa fa-home fa-fw", //icon图标
            btnName: "回到主页", //菜单名称
          },
          {
            fnHandler: "deletedata",
            icoName: "fa fa-minus-square-o  fa-fw",
            btnName: "删除布局",
          },
        ],
      },
      windowWidth: 0, //超时未操作方法
      lastTime: null, // 最后一次点击的时间
      currentTime: null, // 当前点击的时间
      timeOut: 50 * 60 * 1000, // 设置超时时间:50分钟
      timeInterval: "",
      IsColor: "", //颜色
      primaryMenu: "", //一级菜单名
      levelMenu: "", //二级菜单名
      headerDynamicTags: ["首页"],
      inputVisible: false,
      inputValue: "",
      isShow: false, //刷新按钮
      isCollapse: false,
      navList: [], //左侧菜单数据
      ShowPageNum: "0",
      GetDataCount: [], //订单，会员，商品，金额
      GetyxStoreOrderOrderCount: [],
      GetDatachart: [], //图表
      meauList: [],
    };
  },
  created() {},
  mounted() {
    let meau = JSON.parse(getStore("meauList"));
    this.meauList = meau.meauList;
    let uid = GetCookie("uid") * 1;
    this.meauList = this.meauList.filter((item) => {
      return item.permissions.indexOf(uid) != -1 ? item : 0;
    });
    //判断页面是否是刷新，刷新的话读取之前的标签页状态
    if (window.performance.navigation.type == 1) {
      this.headerDynamicTags = JSON.parse(getStore("headerDynamicTags"));
      this.IsColor = getStore("IsColor");
      for (let i in this.meauList) {
        for (let j in this.meauList[i].children) {
          if (this.IsColor == this.meauList[i].children[j].meta.title) {
            this.primaryMenu = this.meauList[i].name;
            this.levelMenu = this.meauList[i].children[j].meta.title;
            this.$router
              .push({
                path: `/view${this.meauList[i].path}/${this.meauList[i].children[j].path}`,
              })
              .catch((err) => {});
          }
        }
      }
      console.log("页面被刷新");
    } else {
      console.log("首次被加载");
      this.IsColor = "首页";
    }
    //************************************** */
  },
  updated() {
    //页面更新前保存状态
    setStore("headerDynamicTags", JSON.stringify(this.headerDynamicTags));
    setStore("IsColor", this.IsColor);
  },
  methods: {
    //不可删除
    //************************ */
    menuhandleOpen(key, keyPath) {},
    menuhandleClose(key, keyPath) {},
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
    //************************ */
    //标签页右击事件
    // rightClick() {
    //   e.preventDefault();
    //   console.log("yifyfyu");
    //   var x = e.clientX;
    //   var y = e.clientY;
    //   console.log(x, y);
    //   // Get the current location
    //   this.contextMenuData.axis = {
    //     x,
    //     y,
    //   };
    // },
    //左侧菜单首页点击事件
    indexShow() {
      this.primaryMenu = "";
      this.levelMenu = "";
      this.IsColor = "首页";
    },
    //点击标签页显示相关页面
    SelectTag(tag) {
      this.IsColor = tag;
      if (tag == "首页") {
        this.primaryMenu = "";
        this.levelMenu = "";
        this.separator = false;
        this.$router
          .push({
            path: "/view/index/index",
          })
          .catch((err) => {});
      }
      for (let i in this.meauList) {
        for (let j in this.meauList[i].children) {
          if (tag == this.meauList[i].children[j].meta.title) {
            this.primaryMenu = this.meauList[i].name;
            this.levelMenu = this.meauList[i].children[j].meta.title;
            this.$router
              .push({
                path: `/view${this.meauList[i].path}/${this.meauList[i].children[j].path}`,
              })
              .catch((err) => {});
          } else {
            if (tag == "委外入库单") {
              this.primaryMenu = this.meauList[i].name;
              this.levelMenu = tag;
              this.$router
                .push({
                  path: "/view/WarehousingManage/Addoutsourcing",
                })
                .catch((err) => {});
            } else if (tag == "秒杀商品修改") {
              this.primaryMenu = this.meauList[i].name;
              this.levelMenu = tag;
              this.$router
                .push({
                  path: "/view/activity/secKillEdit",
                })
                .catch((err) => {});
            } else if (tag == "新增发货单") {
              this.primaryMenu = this.meauList[i].name;
              this.levelMenu = tag;
              this.$router
                .push({
                  path: "/view/SaleManage/AddShipment",
                })
                .catch((err) => {});
            } else if (tag == "委外出库单") {
              this.primaryMenu = this.meauList[i].name;
              this.levelMenu = tag;
              this.$router
                .push({
                  path: "/view/OutboundManage/Editoutsourcing",
                })
                .catch((err) => {});
            }
          }
        }
      }
    },
    //关闭标签页面
    taghandleClose(tag) {
      //删除选中的标签页
      this.headerDynamicTags.splice(this.headerDynamicTags.indexOf(tag), 1);
      //判断要删除的标签页是否是绿颜色的，是的话进入
      if (tag == this.IsColor) {
        //把标签页的最后一变绿
        this.IsColor =
          this.headerDynamicTags[this.headerDynamicTags.length - 1];
        for (let i in this.meauList) {
          for (let j in this.meauList[i].children) {
            //找到变绿的标签页是否在菜单中存在
            if (this.IsColor == this.meauList[i].children[j].meta.title) {
              this.primaryMenu = this.meauList[i].name;
              this.levelMenu = this.meauList[i].children[j].meta.title;
              //路由展示为标签页变绿的页面
              this.$router
                .push({
                  path: `/view${this.meauList[i].path}/${this.meauList[i].children[j].path}`,
                })
                .catch((err) => {});
            }
            //如果最后一个变绿的标签页为首页，表示其他的标签页都删除了
            else if (this.IsColor == "首页") {
              this.$router
                .push({
                  path: "/view/index/index",
                })
                .catch((err) => {});
            } else if (this.IsColor == "委外入库单") {
              this.$router
                .push({
                  path: "/view/WarehousingManage/Addoutsourcing",
                })
                .catch((err) => {});
            } else if (this.IsColor == "新增发货单") {
              this.$router
                .push({
                  path: "/view/SaleManage/AddShipment",
                })
                .catch((err) => {});
            }
          }
        }
      }
    },
    //展开收起单独显示一个
    GetValue(e) {
      let _self = this;
      _self.isShow = e;
    },
    // 点击面包屑首页返回首页
    ClickTogoPage() {
      this.$router
        .push({
          name: "index",
        })
        .catch((err) => {});
    },
    //点击左侧菜单显示相关内容
    forward(index, indexChilder) {
      let IsExist = false; //状态
      for (let i in this.headerDynamicTags) {
        //判断点击的左侧菜单名称在标签页中是否存在，存在则把用IsExist标记
        if (
          this.headerDynamicTags[i] ==
          this.meauList[index].children[indexChilder].meta.title
        ) {
          IsExist = true;
        }
      }
      //为IsExist=false表示在表示在标签页中不存在，则把菜单中的名称加入到标签页中
      if (!IsExist) {
        this.headerDynamicTags.push(
          this.meauList[index].children[indexChilder].meta.title
        );
      }
      this.primaryMenu = this.meauList[index].name;
      this.levelMenu = this.meauList[index].children[indexChilder].meta.title;
      this.IsColor = this.meauList[index].children[indexChilder].meta.title;
      this.separator = true;
    },
    //传值过来的标签名称
    chage(e) {
      console.log(e);
      let IsShow = false;
      for (let i in this.headerDynamicTags) {
        if (this.headerDynamicTags[i] == e) {
          IsShow = true;
        }
      }
      if (IsShow) {
        //把标签页的最后一变绿
        this.IsColor = e;
        return 0;
      } else {
        this.headerDynamicTags.push(e);
      }
      this.levelMenu = e;
      //把标签页的最后一变绿
      this.IsColor = this.headerDynamicTags[this.headerDynamicTags.length - 1];
    },
    //退出登录功能
    handleCommand(command) {
      if (command == "退出登录") {
        this.$confirm("确定要退出登录吗？, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            RemoveCookie("token");
            RemoveCookie("uid");
            this.$message({
              type: "success",
              message: "退出成功!",
            });
            this.$router.push({
              path: "/",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消退出登录",
            });
          });
      }
    },
    //超时未操作方法
    clickDiv() {
      if (this.timeInterval == "") {
        // 5秒钟检测一次
        this.timeInterval = setInterval(this.isTimeOut, 10000);
      }
      //获取最后一次的点击时间
      this.lastTime = new Date().getTime();
    },
    //超时未操作方法
    isTimeOut() {
      this.currentTime = new Date().getTime(); // 每隔10秒获取当前时间
      // 判断上次最后一次点击的时间和这次点击的时间间隔是否大于规定的时间,例:10分钟
      if (this.currentTime - this.lastTime > this.timeOut) {
        //判断是否为登录状态,只有登录状态下才调用方法
        if (GetCookie("token")) {
          RemoveCookie("token");
          clearInterval(this.timeInterval);
          this.timeInterval = "";

          //先返回首页,在给提示,可以根据具体需求调整
          this.$alert("检测到您长时间未操作页面,请重新登录!", "温馨提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.push({
                path: "/",
              });
            },
          });
        }
      }
    },
    //全屏
    full() {
      screenfull.toggle();
      if (!screenfull.isEnabled) {
        this.$message({
          message: "The browser can not support screenfull",
          type: "warning",
        });
      }
      this.isFull = !this.isFull;
    },
    //源码地址
    linkClick() {
      window.open("https://gitee.com/wu-huangyi/", "_blank");
      //  "_blank"  新打开一个窗口
      //  "_self"    覆盖当前的窗口
    },
    //点击搜索按钮显示输入框
    sarchShowInput() {
      this.isShowInput = !this.isShowInput;
    },
  },
};
</script>
<style  scoped>
@import url("//at.alicdn.com/t/c/font_4079730_w2tbx8hd1me.css");
html,
body {
  width: 100vw;
}
@media screen and (max-width: 800px) {
  .HomeLeft {
    width: 56px;
  }
}
@media screen and (max-width: 400px) {
  .HomeLeft {
    display: none;
  }
}

.iconImg {
  width: 10px;
  height: 10px;
}
.HomeLeft-List {
  height: calc(100vh - 50px);
  overflow: scroll;
}
.HomeLeft-List::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
.YshopBut {
  box-sizing: border-box;
  line-height: 50px;
  height: 50px;
  background: #304156;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  white-space: nowrap;
  width: 100%;
}
.HomeRight {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.HomeLeft {
  background-color: #304156;
  float: left;
  height: 100vh;
  overflow: hidden;
}
.YshopList {
  margin-top: 50px;
}
.HomeRight-Main {
  padding: 0 20px;
  padding-top: 20px;
}
.logoTitle {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
.titleNav {
  height: 50px;
}
/* 右侧头部 */
.HomeRight-header {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
}
.HomeRight-Main {
  margin-top: 85px;
  height: calc(100vh - 120px);
  overflow: scroll;
}
/* 右侧底部 */
.rightBottom {
  border-top: 1px solid #e7eaec;
  box-sizing: border-box;
  color: #7a8b9a;
  background-color: #fff;
  width: 100%;
  height: 33px;
  padding: 10px 6px 0;
  position: absolute;
  bottom: 0;
  font-size: 7px;
}
.BottomTxt {
  line-height: 7px;
}
.HomeRight-user {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  line-height: 50px;
  height: 50px;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f5f5;
  box-shadow: 0px 1px 0px 0px rgba(230, 227, 227, 0.5);
}
.HomeRight-userMemu {
  padding-left: 20px;
  border-bottom: 1px solid #f5f5f5;
  box-sizing: border-box;
  line-height: 30px;
  box-shadow: 0px 2px 3px 0px rgba(148, 148, 148, 0.5);
}
.HomeRight-userLeft {
  padding-left: 20px;
  display: flex;
  align-items: center;
  /* min-width: 400px; */
}
.HomeRight-userLeftBreadcrumb {
  font-size: 12px;
  margin-left: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #97a8be;
}
.breadShowText {
  font-size: 14px;
}
.breadcrumbBox {
  display: flex;
  align-items: center;
}
.GoToHomePage {
  font-size: 14px;
  color: #303133;
  cursor: pointer;
}
.GoToHomePage .noneStyle {
  color: #97a8be;
}
.breadLine {
  margin: 0 8px;
  font-weight: bold;
}

.HomeRight-userRight {
  display: flex;
  align-items: center;
}
.HomeRight-userRight > div {
  padding: 0 5px;
}
.HomeRight-userRight > div:nth-of-type(1) > i,
.HomeRight-userRight > div:nth-of-type(2) > i,
.HomeRight-userRight > div:nth-of-type(3) > i,
.HomeRight-userRight > div:nth-of-type(4) > i {
  display: block;
  /* width: 30px; */
  padding: 0 8px;
  font-size: 22px;
  text-align: center;
}

.HomeRight-userRight > div:nth-of-type(3) > i {
  padding: 0 8px;
  font-size: 17px;
  text-align: center;
}

.HomeRight-userRightIamge img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 5px;
}
.sidebar-logo {
  margin: 0 6px 0 0;
  width: 32px;
  height: 32px;
  vertical-align: middle;
}
.icon-yuanmadizhi:hover {
  cursor: pointer;
}
.icon-quanping:hover {
  cursor: pointer;
}
.HomeRight-userRightSearch {
  display: flex;
}
</style>
<style>
@import url("https://at.alicdn.com/t/c/font_4009853_3jy49pqb3bg.css?spm=a313x.7781069.1998910419.54&file=font_4009853_3jy49pqb3bg.css");
.run-enter-active,
.run-leave-active {
  transition: opacity 3s linear 0s;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
.el-menu-vertical-demo {
  background: #304156;
  height: 100%;
}
.el-submenu__title {
  color: #fff;
}
.el-submenu__title:hover {
  background: #3f4c59;
}

.el-menu {
  background: #293442;
}
.el-menu-item {
  background: #304156;
  color: #fff;
  font-size: 13px;
  padding-left: 20px;
}
.iconfont {
  margin-right: 5px;
  position: static;
}
.el-menu-item:hover {
  background: #3f4c59;
}
.el-menu-item-group__title {
  padding: 0;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  /* min-height: 400px; */
}

/* ::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
} */

.el-menu {
  border: none;
}
.HomeLeft .el-submenu__title {
  color: #bfcbd9;
}

.HomeLeft .el-submenu .el-submenu__title {
  background-color: #304156;
}
.HomeLeft .el-submenu .el-submenu__title:hover {
  background-color: #263445;
}
.NavBigBox .el-menu--inline .el-menu-item {
  background-color: #1f2d3d;
}
.NavBigBox .el-menu--inline .el-menu-item:hover {
  background-color: #001528;
}
.NavBigBox .el-menu-item {
  background-color: #304156;
}
.NavBigBox .el-menu-item:hover {
  background-color: #263445;
}

.el-menu--popup-right-start {
  background-color: #304156;
}
.el-menu--popup-right-start .el-menu-item:hover {
  background-color: #263445;
}
.NavBigBox .el-menu-item {
  background-color: #304156;
}
.NavBigBox .el-menu-item:hover {
  background-color: #263445;
}

.NavBigBox1 {
  height: 56px;
}

.el-menu--popup-right-start {
  background-color: #304156;
}
.el-menu--popup-right-start .el-menu-item:hover {
  background-color: #263445;
}
.el-menu-vertical-demo .titleNav {
  padding: 0;
  padding-left: 10px !important;
}
.NavBigBox1 .titleNav:hover {
  background-color: #304156;
}
.titleNav.is-active {
  background-color: #304156;
  color: #fff;
}

.icon-caidanshouqi {
  text-align: center;
  font-size: 20px;
}

.HomeRight-userLeft .el-radio-group {
  margin-bottom: 0 !important;
}
.el-radio-button__inner {
  padding: 0;
  border: none;
}

.HomeRight-userRight .iconfont {
  margin-right: 0;
}

.el-dropdown-menu__item {
  line-height: 25px;
  padding: 0 15px;
}
.HomeRight-userRight .HomeRight-userRightDropdown {
  padding-left: 0;
}

.el-tag {
  cursor: pointer;
  margin-left: 0px;
  margin-right: 10px;
  padding: 0 5px;
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  border: 1px solid #cfcece;
  border-radius: 0px;
}
.el-tag .el-tag__close {
  color: #cfcece;
  top: 0;
  right: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.green {
  background: #42b983;
  color: #fff;
}
.HomeRight-userRightSearch .el-input__inner {
  border: none;
  border-radius: 0px;
  border-bottom: 1px solid blue;
}
</style>